<template>
    <require from="./em-chat-channel-members-show.css"></require>
    <em-modal classes="" em-modal.ref="emModal" onshow.call="showHandler($event)" onapprove.call="approveHandler($event)" confirm-label="确定">
        <div slot="header">频道成员|分组信息</div>
        <div slot="content" class="em-chat-channel-members-show">
            <div ui-tab class="ui pointing secondary menu">
                <a class="item active" data-tab="channel-members-view">成员信息（${channel.members.length}）</a>
                <a class="item" data-tab="channel-groups-view">分组信息（${countChannelGroups(channel)}）</a>
            </div>
            <div class="ui tab segment active" style="margin-bottom: 0;" data-tab="channel-members-view">
                <div style="min-height: 285px; max-height: 285px; overflow: auto;">
                    <table class="ui very basic striped compact table">
                        <thead>
                            <tr>
                                <th><i class="at icon" style="margin-right: 0;"></i>用户名</th>
                                <th>姓名</th>
                                <th>邮箱</th>
                                <th></th>
                                <th>登录</th>
                                <th style="width: 108px; text-align: center;">状态</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr repeat.for="item of channel.members | sort:'username'">
                                <td><i class="at icon" style="margin-right: 0;"></i>${item.username}</td>
                                <td>${item.name}</td>
                                <td>${item.mails}</td>
                                <td>
                                    <span ui-pp data-html="${item.level ? '<b>职位:</b> ' + item.level + '<br/>' : ''} ${item.phone ? '<b>座机:</b> ' + item.phone + '<br/>' : ''} ${item.mobile ? '<b>手机:</b> ' + item.mobile + '<br/>' : ''} ${item.place ? '<b>位置:</b> ' + item.place + '<br/>' : ''} ${item.hobby ? '<b>爱好:</b> ' + item.hobby : ''}"><i class="info circle icon"></i></span>
                                </td>
                                <td title="${item.lastLoginDate | date}">${item.lastLoginDate | timeago}</td>
                                <td if.bind="item.enabled">
                                    <div class="ui green tag label">启用中</div>
                                </td>
                                <td if.bind="!item.enabled">
                                    <div class="ui red tag label">已停用</div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="ui tab segment" style="margin-bottom: 0;" data-tab="channel-groups-view">
                <div style="min-height: 285px; max-height: 285px; overflow: auto;">
                    <table class="ui very basic striped compact table">
                        <thead>
                            <tr>
                                <th style="width: 120px;"><i class="at icon" style="margin-right: 0;"></i>标识</th>
                                <th style="width: 120px;">描述</th>
                                <th style="width: 40px;"></th>
                                <th>成员</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr repeat.for="item of channel.channelGroups | sort:'name'" show.bind="item.status != 'Deleted'">
                                <td><i class="at icon" style="margin-right: 0;"></i>${item.name}</td>
                                <td>${item.title}</td>
                                <td>
                                    <span data-tooltip="${item.creator.name ? item.creator.name : item.creator.username} 添加于 ${item.createDate | timeago}"><i class="info circle icon"></i></span>
                                </td>
                                <td>
                                    <a repeat.for="member of item.members | sort:'username'" class="ui ${member.username == loginUser.username ? 'basic blue' : ''} label ${!member.enabled ? 'disabled-user' : ''}">
                                      ${member.name ? member.name : member.username}
                                      <i if.bind="member.username == loginUser.username" click.delegate="leaveHandler(item)" title="离开频道组" class="delete link red icon"></i>
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </em-modal>
    <em-confirm-modal em-confirm-modal.ref="confirmMd"></em-confirm-modal>
</template>
